<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建、删除和替换元素</title>
    <script src="../../js/jquery-1.4.2.js"></script>
</head>
<body>
    <button id="b1"> 创建新元素</button>
    <button id="b2"> 删除元素</button>
    <button id="b3"> 替换元素</button>
    <div>
        div
    </div>
</body>
<script>
    $(function (){
        $('#b3').click(function () {
            $('div').replaceWith('<h1>111</h1>')
        })

        $('#b2').click(function () {
            var oBody = $('body')[0]
            var oDivs = $('body>div')
            oBody.removeChild(oDivs[oDivs.length-1])
            // $('body').find("div:first").remove()
        })

        $('#b1').click(function(){
            var r = Math.floor(Math.random()*255)
            var g = Math.floor(Math.random()*255)
            var b = Math.floor(Math.random()*255)
            $("body").append($("<div style='height: 100px;width: 100px;border: 1px solid #000;background:rgb("+ r +"," + g + ","+ b+") '></div>"))
        })
    })
</script>
</html>